import { Layout } from "antd";
import {
  Panel,
  PanelGroup,
  PanelResizeHandle,
} from "react-resizable-panels";
import type { ImperativePanelGroupHandle } from "react-resizable-panels";
import LeftSideBar from './components/LeftSideBar'
import FileExplorer from './components/FileExplorer'
import CmdExplorer from './components/CmdExplorer'
import EditableTabs from './components/EditableTabs'
import BottomSideBar from './components/BottomSideBar'
import RightSideBar from './components/RightSideBar'
import Header from "./components/Header";
import ToolBar from './components/ToolBar'
import { useAppStore } from '@renderer/pages/designer/store/appStore'
import { useEffect, useRef } from "react";

// store的内容需要缓存下来
// 自动加载上次打开的项目
// 还原关闭前的状态，缓存跟着项目走
// 缓存到本地硬盘
// vscode是如何监听本地文件的变化的？
// 源码视图，低代码视图

const App = () => {

  const leftTabActiveKey = useAppStore(state => state.leftTabActiveKey);
  const rightTabActiveKey = useAppStore(state => state.rightTabActiveKey);
  const bottomTabActiveKey = useAppStore(state => state.bottomActiveKey);

  const ref1 = useRef<ImperativePanelGroupHandle>(null);
  const ref2 = useRef<ImperativePanelGroupHandle>(null);

  useEffect(() => {
    const panelGroup = ref1.current;
    if (panelGroup) {

      const [a, b, c] = panelGroup.getLayout();
      panelGroup.setLayout([20, b + a - 20, c]);
    }
  }, [leftTabActiveKey])

  useEffect(() => {
    const panelGroup = ref1.current;
    if (panelGroup) {
      const [a, b, c] = panelGroup.getLayout();
      panelGroup.setLayout([a, b + c - 20, 20]);
    }
  }, [rightTabActiveKey])

  useEffect(() => {
    const panelGroup = ref2.current;
    if (panelGroup) {
      const [a, b] = panelGroup.getLayout();
      panelGroup.setLayout([a + b - 20, 20]);
    }
  }, [bottomTabActiveKey])

  return (<Layout className="w-full h-full">
    <Header />
    <ToolBar />
    <PanelGroup autoSaveId="conditional" direction="horizontal" ref={ref1}>
      <LeftSideBar />
      <Panel collapsible={true} collapsedSize={0} minSize={12} defaultSize={20}>
        {leftTabActiveKey === 'file_explorer' && <FileExplorer />}
        {leftTabActiveKey === 'cmd_explorer' && <CmdExplorer />}
      </Panel>
      <PanelResizeHandle>
        <div className="w-px bg-slate-600  h-screen hover:bg-blue-600"></div>
      </PanelResizeHandle>
      <Panel>
        <PanelGroup direction="vertical" ref={ref2}>
          <div />
          <Panel collapsible={true} collapsedSize={0} minSize={20} >
            <EditableTabs />
          </Panel>
          <PanelResizeHandle><div className="h-px bg-slate-600 w-full hover:bg-blue-600"></div></PanelResizeHandle>
          <Panel collapsible={true} collapsedSize={0} minSize={10} defaultSize={20}>
            日志
          </Panel>
          <BottomSideBar />
        </PanelGroup>
      </Panel>
      <PanelResizeHandle><div className="w-px bg-slate-600  h-screen hover:bg-blue-600" ></div></PanelResizeHandle>
      <Panel collapsible={true} collapsedSize={0} minSize={10} defaultSize={20}>
        聊天
      </Panel>
      <RightSideBar />
    </PanelGroup>
  </Layout>
  );
};

export default App;
